<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <MainSearchForm ref="supplierFormRef" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
      <div class="main_table" style="min-height: 590px">
        <!-- 一级表头 -->
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="paginatedData"
          element-loading-text="列表加载中"
          fit
          border
          highlight-current-row
          @expand-change="handleSelectionChange"
          :expand-row-keys="expands"
          :row-key="getRowKeys"
        >
          <el-table-column type="expand">
            <!-- 这里定义展开行的内容 -->
            <template slot-scope="props">
              <el-table
                :data="tableData"
                v-loading="TwolistLoading"
                element-loading-text="商户加载中"
                border
                highlight-current-row
                @expand-change="handleTwoChange"
                style="padding-left: 15px"
                :height="handleScrool"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div
                      v-loading="threelistLoading"
                      element-loading-text="溯源信息加载中"
                    >
                      <div class="box">
                        <div class="item flex-column">
                          <span class="item-title14">查询信息</span>
                          <span class="item-title12"
                            >溯源编码: {{ infoFrom.trace_code }}</span
                          >
                          <span class="item-title12"
                            >当前查询次数: {{ infoFrom.query_count }} 次</span
                          >
                          <span class="item-title12"
                            >首次查询时间: {{ infoFrom.first_query_time }}</span
                          >
                        </div>
                        <div class="item flex-column">
                          <span class="item-title14">订单信息</span>
                          <span class="item-title12"
                            >下单客户: {{ infoFrom.nickname }}</span
                          >
                          <span class="item-title12"
                            >下单数量: {{ infoFrom.order_num }}</span
                          >
                          <span class="item-title12"
                            >发货数量: {{ infoFrom.collected_num }}</span
                          >
                          <span class="item-title12"
                            >归属单号: {{ infoFrom.order_sn }}</span
                          >
                          <span class="item-title12"
                            >退货数量: {{ infoFrom.return_num }}</span
                          >
                        </div>
                        <div class="item flex-column">
                          <span class="item-title14">供应商信息</span>
                          <span class="item-title12"
                            >供应商资质:
                            <span
                              class="item-title14-images"
                              @click="openFiles(infoFrom.company_qualification)"
                              >查看资质</span
                            ></span
                          >
                          <span class="item-title12"
                            >供应商名称: {{ infoFrom.company_name }}</span
                          >
                          <span class="item-title12"
                            >联系地址: {{ infoFrom.company_address }}</span
                          >
                        </div>
                        <div class="item flex-column">
                          <span class="item-title14">检测信息</span>
                          <!-- <span class="item-title12"
                            >检测报告图片:
                            <span class="item-title14-images"
                            @click="viewreport(infoFrom.company_qualification)"
                              >查看报告</span
                            ></span
                          > -->
                          <span class="item-title12"
                            >检测项目: {{ infoFrom.project.name }}
                          </span>
                          <span class="item-title12"
                            >检测人: {{ infoFrom.testing_user }}</span
                          >
                          <span class="item-title12"
                            >检测结果:
                            <span v-if="infoFrom.result == 1">合格</span>
                            <span v-if="infoFrom.result == 2">不合格</span>
                          </span>
                          <span class="item-title12"
                            >抑制率 : {{ infoFrom.inhibition_rate }}%</span
                          >
                          <span class="item-title12"
                            >检测日期：{{ infoFrom.time }}</span
                          >
                        </div>
                        <div
                          class="item flex-column"
                          v-if="infoFrom.son_company"
                        >
                          <span class="item-title14">二级供应商信息</span>
                          <span class="item-title12"
                            >供应商名称:{{ infoFrom.son_company.name }}
                            <!-- <span class="item-title14-images"
                              >查看资质</span> -->
                          </span>
                          <span class="item-title12"
                            >手机号: {{ infoFrom.son_company.mobile }}</span
                          >
                          <span class="item-title12"
                            >营业执照:
                            <span
                              class="item-title14-images"
                              @click="openFi(infoFrom.son_company.pics)"
                              >查看资质</span
                            >
                          </span>
                        </div>
                        <!-- <div class="item flex-column" v-else>
                          <span class="item-title14">...</span>
                        </div> -->
                      </div>
                      <div class="line"></div>
                      <div class="liucheng flex-btw">
                        <div class="liucheng-left">
                          <span class="liucheng-left-titles">溯源信息</span>
                          <el-steps
                            :active="infoFrom.flowList.length"
                            align-center
                          >
                            <el-step
                              v-for="(item, index) in infoFrom.flowList"
                              :key="index"
                            >
                              <template slot="title">
                                <span>{{ item.status_name }}</span>
                              </template>
                              <template class="stepClass" slot="description">
                                <span
                                  >{{ item.status_name }}:
                                  {{ item.name }}</span
                                >
                                <span
                                  >{{ item.status_name }}时间:
                                  {{ item.time | timer }}</span
                                >
                              </template>
                            </el-step>
                          </el-steps>
                        </div>
                        <div class="liucheng-right">
                          <span
                            class="liucheng-right-titles"
                            style="margin-botton: 15px"
                            >留样视频</span
                          >
                          <div class="video" :id="infoFrom.trace_code"></div>
                          <!-- <source src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                              type="video/webm" /> -->
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="nickname" label="商户">
                </el-table-column>
                <el-table-column prop="phone" label="电话"> </el-table-column>
                <el-table-column prop="sort_num" label="配送数量">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="name">
            <template slot-scope="scope">
              <span>{{ scope.row.name + (scope.$index + 1) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="desc"> </el-table-column>
          <el-table-column label="配送总量" prop="delivery_zl">
          </el-table-column>
          <el-table-column label="单位">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.unit }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="溯源码" prop="delivery_zl">
            <template slot-scope="scope">
              <el-image :src="symUrl" style="width: 60px" :preview-src-list="[symUrl]"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <div class="main_page_r">
          <el-pagination
            :current-page.sync="current.page"
            :page-sizes="[10,20, 30, 50, 100]"
            :page-size.sync="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="indexTableData.length"
            background
            @size-change="getList"
            @current-change="getList"
          />
        </div>
      </div>
    </div>

    <el-dialog title="供应商审核" :visible.sync="dialogVisible" width="70%">
      <el-form
        :rules="rules"
        ref="agentForm"
        :model="agentForm"
        label-width="80px"
      >
        <el-form-item label="资质简图:">
          <el-upload
            :action="uploadPath"
            list-type="picture-card"
            :data="{ store: 'saas/contract' }"
            style="min-height: 120px"
            :file-list="filelist"
            :disabled="true"
            :on-preview="handlePictureCardPreview"
          >
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="备注:" prop="audit_remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核备注"
            :disabled="disabled"
            v-model="agentForm.audit_remark"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="审核状态:" prop="audit_status">
          <el-select
            class="remark"
            :disabled="disabled"
            v-model="agentForm.audit_status"
            placeholder="请选择审核状态"
          >
            <el-option label="同意" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="sublemt"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="供应商资质" :visible.sync="dialogVisibles" width="40%">
      <div
        style="margin-left: 30%"
        v-html="`${infoFrom.company_qualification}`"
      ></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibles = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="供应商资质1111" :visible.sync="dialogV" width="80%">
      <div>
        <img style="width: 100%" :src="son_company" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogV = false">取 消</el-button>
        <el-button type="primary" @click="dialogV = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import EZUIKit from "ezuikit-js";
import {
  getSuyuanList,
  getSuyuanTwoList,
  getCompanyList,
} from "@/api/traceability/index";
import { getTrace, getTraceDetail } from "@/api/traceability/index2";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { indexData } from './MockData'
const { indexTableData, formList, formValue } = indexData
export default {
  name: "advertisement",
  data() {
    return {
      symUrl: 'https://copartner.oss-cn-beijing.aliyuncs.com/goods/2411/29/iCG6jUmaHAxVCMRqCcIoOnaBfVtcO0lOXKaEd6an.png',
      trace_code: "",
      uploadPath,
      player: "",
      TwolistLoading: false,
      threelistLoading: false,
      expands: [],
      indexTableData,
      formList,
      formValue,
      form: {
        // 商品名称
        goods_name: null,
        // 商户名称
        nickname: null,
        // 溯源时间
        created_at: null,
        // 订单号
        order_no: null,
        // 供应链公司id
        company_id: null,
        // 供应商id
        supplier_id: null,
      },

      userType: [
        {
          name: "开启",
          id: 1,
        },
        {
          name: "关闭",
          id: 2,
        },
      ],

      // 加载功能
      listLoading: false,
      // 列表字段
      list: [],
      tableData: [],

      // 分页
      current: {
        page: 1,
        limit: 10,
      },
      totalCount: indexTableData.length || 0,

      // 校验规则
      rules: {},
      // 新增的模态框
      dialogVisible: false,
      // 新增的表单信息
      agentForm: {
        audit_remark: null,
        audit_status: null,
      },

      // 查看已上传的图片二级模态框
      dialogVisible1: false,
      // 查看已上传的图片链接
      dialogImageUrl: null,

      filelist: [],
      disabled: false,
      moredata: false,
      //  查看资质
      dialogVisibles: false,
      //  二级供应商营业执照
      dialogV: false,
      son_company: null,
      // 二级溯源列表的等待状态
      twoLoading: false,
      infoFrom: {
        // 溯源编码
        trace_code: null,
        // 查询次数
        query_count: null,
        // 查询时间
        first_query_time: null,
        // 下单客户
        nickname: null,
        // 下单数量
        order_num: null,
        // 发货数量
        collected_num: null,
        // 归属单号
        order_sn: null,
        // 退货数量
        return_num: null,
        // 供应商名称
        company_name: null,
        // 联系地址
        company_address: null,
        // 供应商资质
        company_qualification: null,
        // 流程
        flowList: [],
        // 供应商
        gongyingshangList: [],
        // 供应链
        gongyinglianList: [],
        // 药残检测信息
        inhibition_rate: null, //抑制率 如80.00%
        testing_user: null, //检测人
        result: null, //1 合格 2不合格
        time: null, //检测时间
        project: [], //检测项目  name名称
        son_company: null, //二级供应商参数
      },
    };
  },
  computed: {
    paginatedData() {
      const start = (this.current.page - 1) * this.current.limit;
      const end = start + this.current.limit;
      return this.indexTableData.slice(start, end);
    }
  },
  filters: {
    timer(value) {
      // 假设时间戳为 1633443751109
      let timestamp = value + "000";

      const date = new Date(Number(timestamp));
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，所以需要加1
      const day = date.getDate();

      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
  },

  created() {
    // 获取当前日期
    let currentDate = new Date();
    // 获取年份
    let currentYear = currentDate.getFullYear();
    // 获取月份（注意：月份范围是 0-11，所以要加1）
    let currentMonth = currentDate.getMonth() + 1;
    // 获取日期
    let currentDay = currentDate.getDate();
    this.form.created_at = `${currentYear}-${currentMonth}-${currentDay}`;
    // 获取供应链
    this.getGongyinglian();
    this.getList();
    // this.handleScroll();
  },
  mounted() {},
  methods: {
    //  表单搜索
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getList()
    },
    getRowKeys(row) {
      return row.id;
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      let data = {
        goods_name: this.form.goods_name,
        created_at: this.form.created_at,
        page: this.current.page,
        page_size: this.current.limit,
        nickname: this.form.nickname,
        order_no: this.form.order_no,
        supplier_id: this.form.supplier_id,
        company_id: this.form.company_id,
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      getSuyuanList(query).then((res) => {
        if (res.errcode == 0) {
          this.listLoading = false;
          this.list = res.data.list;
          this.totalCount = res.data.count;
          // 给list中每个对象插入   hasChildren: true
          this.list.forEach((item) => {
            item.hasChildren = true;
          });
        } else {
          this.$message.error(res.errmsg);
          this.listLoading = false;
        }
      });
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getArticleList();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.getList();
    },
    // 底部到视口顶部的距离
    handleScroll() {
      const distance = window.innerHeight - 550;
      this.handleScrool = distance + "px";
      console.log("底部到视口顶部的距离", this.handleScrool);
    },
    async handleSelectionChange(row, expanded) {
      // this.handleScroll();
      let that = this;
      if (that.trace_code) {
        that.trace_code.stop();
      }
      this.tableData = [];
      this.TwolistLoading = true;

      // 创建一个新的数组来存储要展开的行的唯一标识
      const newExpanded = [];
      expanded.forEach((item) => {
        if (item.id === row.id) {
          newExpanded.push(item.id);
        }
      });
      this.expands = newExpanded;

      // return;

      // return;
      // 只打开一个展开行
      // if (expanded.length > 1) {
      //   expanded.shift();
      // }

      let data = {
        created_at: '2024-10-22',
        // created_at: this.form.created_at,
        // name: row.name,
        // name: '家常炒菜管'
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      await getSuyuanTwoList(query).then((res) => {
        if (res.errcode == 0) {
          that.$nextTick(function () {
            that.tableData = res.data.list;
            // console.log("getSuyuanTwoList", that.tableData);
            that.TwolistLoading = false;
            that.$forceUpdate();
          });

          // // 关闭loading
          // that.$forceUpdate()
        } else {
          that.$message.error(res.errmsg);
        }
      });
    },
    async handleTwoChange(row) {
      // this.infoFrom = {}
      let that = this;
      that.threelistLoading = true;
      // if (that.trace_code) {
      //   that.trace_code.stop();
      // }
      // let loading = Loading.service({
      //   target: document.querySelector(".main_two_table"),
      //   lock: true,
      //   text: "加载中",
      //   background: "rgba(0,0,0,0.8)",
      //   spinner: "el-icon-loading",
      // });
      // 获取溯源详情
      let getTraceDetail = this.getTraceDetail(row.id);
      // 获取流程
      let getFlow = this.getFlow(row.id);
      await Promise.all([getTraceDetail, getFlow]).then((res) => {
        let {
          order_trace,
          order_info,
          company_info,
          DrugResidueTesting,
          son_company,
        } = res[0];
        // 溯源编码
        this.infoFrom.trace_code = order_trace.trace_code || null;
        // 查询次数
        this.infoFrom.query_count = order_trace.query_count || null;
        // 查询时间
        this.infoFrom.first_query_time = order_trace.first_query_time || null;
        // 下单客户
        this.infoFrom.nickname = order_info.nickname || null;
        // 下单数量
        this.infoFrom.order_num = order_info.order_num || null;
        // 发货数量
        this.infoFrom.collected_num = order_info.collected_num || null;
        // 归属单号
        this.infoFrom.order_sn = order_info.order_sn || null;
        // 退货数量
        this.infoFrom.return_num = order_info.return_num || null;
        // 供应商名称
        this.infoFrom.company_name = company_info.company_name || null;
        // 联系地址
        this.infoFrom.company_address = company_info.company_address || null;
        // 供应商资质
        this.infoFrom.company_qualification =
          company_info.company_qualification || null;
          console.log(res);
        this.infoFrom.flowList = res[1].list.reverse();
        that.threelistLoading = false;
        console.log("this.infoFrom", this.infoFrom);
        //  药残检测信息
        this.infoFrom.inhibition_rate =
          DrugResidueTesting.inhibition_rate || null; //抑制率
        this.infoFrom.testing_user = DrugResidueTesting.testing_user || null; //检测人
        this.infoFrom.result = DrugResidueTesting.result || null; //1 合格 2不合格
        this.infoFrom.time =
          this.getData(Number(DrugResidueTesting.time) * 1000) || null; //检测时间
        this.infoFrom.project = DrugResidueTesting.project || null; //检测项目 .name名字
        //  二级供应商 如有 此参数有值 为name 姓名', 'contact', 'mobile' 手机号, 'pics 营业执照
        this.infoFrom.son_company = son_company;
        that.$nextTick(() => {
          // that.trace_code = that.infoFrom.trace_code

          if (company_info.company_yingshi) {
            that.trace_code = new EZUIKit.EZUIKitPlayer({
              id: that.infoFrom.trace_code, // 视频容器ID
              accessToken: company_info.token,
              url: company_info.company_yingshi,
              width: 300,
              height: 200,
              audio: 0,
              header: ["capturePicture"],
              footer: ["broadcast", "hd", "fullScreen"],
              handelError: (data) => {
                that.trace_code.resume();
                console.log("失败回调", data);
                console.log(trace_code);
              },
            });
            // console.log(that.player);
            // console.log('播放器已加载完成');
            that.trace_code.stop();
            that.trace_code.play();
          }
        });
        // )

        // 等待播放器加载完成后再调用 stop 和 play

        // loading.close();
      });
      // this.handleScroll();
    },
    // 新增
    editAction() {
      this.dialogVisible = true;
    },
    // 切换分页大小
    changeLimit() {},
    // 切换分页
    changePage() {},
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview() {},
    // 移除文件时的钩子
    handleRemove() {},
    // 切换检索中的广告状态
    selectAction() {},
    // 表单提交
    sublemt() {},
    changeTime(e) {
      // console.log(e);
    },
    // 打开资质文件等图片
    openFiles(file) {
      if (file) {
        this.dialogVisibles = true;
        console.log("11111111111", this.infoFrom.company_qualification);
      } else {
        this.$message.error("文件不存在");
      }
    },
    // 打开营业执照
    openFi(val) {
      if (val) {
        this.dialogV = true;
        this.son_company = this.infoFrom.son_company.pics;
      } else {
        this.$message.error("文件暂不存在");
      }
    },

    // 获取供应链
    getGongyinglian() {
      let data = {};
      let query = this.getPackage(data);
      getCompanyList(query).then((res) => {
        if (res.errcode == 0) {
          this.gongyinglianList = res.data.companyList;
          this.gongyingshangList = res.data.companyDownList;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取溯源详情
    getTraceDetail(id) {
      console.log("id", id);
      return new Promise((resolve, reject) => {
        let data = {
          id,
        };
        let query = this.getPackage(data);

        getTrace(query).then((res) => {
          console.log("res获取溯源详情", res);
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },
    // 获取流程
    getFlow(id) {
      return new Promise((resolve, reject) => {
        let data = {
          order_list_id: id,
        };
        let query = this.getPackage(data);
        getTraceDetail(query).then((res) => {
          console.log("res获取流程", res);
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },

    // 转换时间戳函数
    getData(n) {
      if (n) {
        let now = new Date(n);
        let y = now.getFullYear();
        let m = now.getMonth() + 1;
        let d = now.getDate();
        return (
          y +
          "-" +
          (m < 10 ? "0" + m : m) +
          "-" +
          (d < 10 ? "0" + d : d) +
          " " +
          now.toTimeString().substr(0, 8)
        );
      }
    },

    // 封装请求前函数
    getPackage(data) {
      return Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.maincl {
  .more {
    margin-left: 50px;
  }

  .handle_btn {
    padding: 0;
    border: 0;
  }

  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    width: 100%;
  }

  .logoStyle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: auto;

    .logo {
      min-width: 100px;
      width: 100px;
      height: 67px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .logoStyle::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.main_table .el-table--small td .cell {
    height: auto !important;
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  // /deep/.el-table tr.expanded+tr {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr>td {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr .mainex_ta {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr .mainex_ta th,
  // /deep/.el-table tr.expanded+tr .mainex_ta tr {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr:hover {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr:hover>td {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr .el-table tr:hover {
  //   background: #fafafa !important;
  // }

  // /deep/.el-table tr.expanded+tr .el-table tr:hover>td {
  //   background: #fafafa !important;
  // }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.box {
  // width: calc(100% - 60px);
  margin: 0 auto;
  padding: 5px 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  .item {
    justify-content: flex-start;

    &-title12 {
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 12px;
      color: #666666;
    }

    &-title14 {
      font-weight: 600;
      font-size: 14px !important;
      margin-bottom: 10px;
      color: #333;

      &-images {
        color: #0eaa78;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.line {
  border-bottom: 1px solid #eee;
  margin: 20px;
}

.liucheng {
  width: calc(100% - 40px);
  margin: 0 auto;

  &-left {
    width: 80%;
    height: 260px;

    &-titles {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-bottom: 40px;
      display: block;
    }
  }

  &-right {
    width: 20%;
    height: 260px;

    &-titles {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-bottom: 40px;
      display: block;
    }
  }
}

.exptitle {
  padding: 10px 0px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/deep/.el-step__description.is-finish {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #0eaa78;
  border-color: #0eaa78;
}

/deep/.el-step__description.is-process {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/deep/.el-step__description.is-wait {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/deep/.el-steps {
  flex: 1 !important;
}

/deep/.el-step.is-center .el-step__description {
  padding-left: 0;
  padding-right: 0;
}

/deep/.el-step__head.is-finish {
  color: #0eaa78;
  border-color: #0eaa78;
}

/deep/.el-step__title.is-finish {
  color: #0eaa78;
  border-color: #0eaa78;
}
</style>